<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery" >
        <a-row :gutter="24">
          <a-col :xl="7" :lg="7" :md="8" :sm="24">
            <a-form-item label="资源名称">
              <a-input placeholder="请输入资源名称" v-model="queryParam.resourceName" ></a-input>
            </a-form-item>
          </a-col>
          <a-col :xl="7" :lg="7" :md="8" :sm="24">
            <a-form-item label="所有项目" >
              <a-select
                placeholder="搜索下拉"
                v-model="queryParam.projectName"
                show-search
                @search="handleChange('1', $event)"
                @change="onchanges"
                option-filter-prop="children"
                :filter-option="filterOption"
              >
                <a-select-option v-for="item in arr" :key="item.id">{{ item.projectName }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <template v-if="toggleSearchStatus">
            <a-col :xl="7" :lg="7" :md="8" :sm="24">
              <a-form-item label="所属文件夹" >
                <a-select
                  placeholder="搜索下拉"
                  v-model="queryParam.folderName"

                  show-search
                  option-filter-prop="children"
                  :filter-option="filterOption"
                  @search="handleChange('2', $event)"

                >
                  <a-select-option :value="item.id" v-for="item in folderlist" :key="item.id" >{{ item.folderName }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :xl="7" :lg="7" :md="8" :sm="24">
              <a-form-item label="资源类型">
                <a-select
                  placeholder="搜索下拉"
                  v-model="queryParam.fileSuffix"
                  show-search
                  @search="handleChange('3', $event)"
                >
                  <a-select-option :value="item" v-for="(item, index) in filelist" :key="index">{{
                    item
                  }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :xl="7" :lg="7" :md="8" :sm="24">
              <a-form-item label="创建时间">
                <a-range-picker
                  v-model="queryParam.birthdayRange"
                  format="YYYY-MM-DD HH:mm:ss"
                  :placeholder="['开始时间', '结束时间']"
                  @change="onBirthdayChange"
                />
              </a-form-item>
            </a-col>
            <a-col :xl="7" :lg="7" :md="8" :sm="24">
              <a-form-item label="是否已分享">
                <a-select placeholder="搜索下拉" v-model="queryParam.isShare">
                  <a-select-option value="1">是</a-select-option>
                  <a-select-option value="2">否</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </template>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset('2')" icon="reload" style="margin-left: 8px">重置</a-button>
              <a @click="handleToggleSearch" style="margin-left: 8px">
                {{ toggleSearchStatus ? '收起' : '展开' }}
                <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
              </a>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <a-button @click="handleAdd" type="primary">上传资源</a-button>
      <a-button @click="openProject" type="primary">新建项目</a-button>
      <a-button type="primary" @click="shareAdd">分享资源</a-button>
      <a-dropdown v-if="selectedRowKeys.length > 0">
        <a-menu slot="overlay">
          <a-menu-item key="1" @click="batchDel"><a-icon type="delete" />批量删除</a-menu-item>
        </a-menu>
        <a-button style="margin-left: 8px"> 批量操作 <a-icon type="down"/></a-button>
      </a-dropdown>
    </div>

    <!-- table区域-begin -->
    <div>
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择
        <a style="font-weight: 600">{{ selectedRowKeys.length }}</a
        >项
        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
      </div>

      <!--树结构数据-->
      <div id="container">
    <div id="left">
      <div class="m-page">
        <div class="content">
          <div class="menu-data">
            <a-tree  :tree-data="treeData" v-model="checkedKeys"  :selectedKeys.sync="selectedKeys"  @select="onSelect" :replace-fields="fieldNames" blockNode>
              <template v-slot:title="nodeData">
                <span>{{nodeData.title}}</span>
                <a-button-group style="float:right">
                  <span type="button" size="small" @click="addNode(nodeData)" style="color:#1890FF">新增下级</span>
                </a-button-group>
              </template>
            </a-tree>
          </div>
        </div>
      </div>
    </div>
    <div id="right">
      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        class="j-table-force-nowrap"
        :rowSelection="{
          selectedRowKeys: selectedRowKeys,
          onChange: onSelectChange
        }"
        @change="handleTableChange"
      >
        <span slot="action" slot-scope="text, record">
          <a-popconfirm title="确定删除吗?" @confirm="() => handledelete(record.id)">
            <a>删除</a>
          </a-popconfirm>
          <a-divider type="vertical" />
          <a @click="handledown(record)">下载</a>

          <a-divider type="vertical" />
          <a-dropdown>
            <a class="ant-dropdown-link">更多 <a-icon type="down"/></a>
            <a-menu slot="overlay">
              <a-menu-item>
                <a @click="detailFormOk(record)">详情</a>
              </a-menu-item>
              <a-menu-item>
                <a @click="shareAdd(record)">分享</a>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </span>
      </a-table>
    </div>
      </div>
    </div>
    <!-- table区域-end -->
    <Resourcelist-modal ref="modalForm" @ok="modalFormOk" @oMethod="openProject" @resource="resource" @resourceNameList="resourceNameList"></Resourcelist-modal>
    <share-Modal ref="shareForm" @ok="shareFormOk"> </share-Modal>
    <deatil-Modal ref="detailForm" @ok="detailFormOk"></deatil-Modal>
    <project-Modal ref="openProject" @ok="openProjectOk" @showTree="showTree"> </project-Modal>
    <flode-modal ref="flodeForm" @ok="flodeFormOk" @showTree="showTree"></flode-modal>
  </a-card>
</template>

<script>
import '@/assets/less/TableExpand.less'
import ResourcelistModal from './modules/ResourcelistModal'
import shareModal from './modules/shareModal'
import deatilModal from './modules/deatilModal'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { downLodaImg, getAction,deleteAction } from '@/api/manage'
import { nextTick } from 'vuedraggable'
import projectModal  from './modules/ProjectModal'
import flodeModal  from './modules/FlodeModal'
export default {
  name: 'BusTreviRiverPcList',
  mixins: [JeecgListMixin],
  components: {
    ResourcelistModal,
    shareModal,
    deatilModal,
    projectModal,
    flodeModal

  },
  data() {
    return {
      description: '资源列表',
      value: '',
      // 表头
      columns: [
        {
          title: '资源名称',
          align: 'center',
          dataIndex: 'resourceName'
        },
        {
          title: '所属项目',
          align: 'center',
          dataIndex: 'projectName'
        },
        {
          title: '所属文件夹',
          align: 'center',
          dataIndex: 'folderName'
        },
        {
          title: '资源类型',
          align: 'center',
          dataIndex: 'fileSuffix'
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          scopedSlots: { customRender: 'action' }
        }
      ],
      url: {
        list: `/resource/busResource/list?creator=${localStorage.getItem('userid')}`,
        delete: '/resource/busResource/delete',
        deleteBatch: '/resource/busResource/deleteBatch',
        download: '/file/Download/download',
        pjtselect: '/bus/busProject/projectNameList', //所有项目
        busFolder: '/bus/busFolder/folderNameList', //所属文件夹
        fileLists: '/file/file/resourceNameList', //资源类型
        showTreeList: "/bus/busProject/treeList", //树形结构
        resourceList: "resource/busResource/resourceListById", //通过文件夹id或者项目id查询文件夹列表
        determineById: "/bus/busFolder/determine", //通过文件夹id查询文件夹
      },
      arr: [], //所有项目下拉数据
      folderlist: [],
      filelist: [],
      types: '',
   treeData: [],
   temp: [],
   fieldNames: { children: 'children', title: 'title', key: 'id' },
   dataSource: []
    }
  },
  computed: {
    importExcelUrl: function() {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
    }
  },
  mounted() {
    this.projectNameList()
    this.folderNameList()
    this.resourceNameList()
    this.showTree()
  },
  methods: {
     //展示树结构
  showTree() {
   //请求树形结构
   //请求参数
   getAction(this.url.showTreeList).then((res) => {
    if (res.success) {
     this.temp.push(JSON.stringify(res.result.records))

     //遍历temp数组
     for (let i = 0; i < this.temp.length; i++) {
      //将字符串转换为数组
      this.treeData = JSON.parse(this.temp[i]);
     }
    }
   })
  },
    addNode(data){
      this.$refs.flodeForm.visible = true
      this.$refs.flodeForm.id=data.id

    },
    openProject(){
      console.log("打开项目添加面板")
      this.$refs.openProject.visible = true;
    },
  onSelect(checkedKeys) {
    console.log(checkedKeys,'checkedKeys');
    localStorage.setItem('ids',checkedKeys.join(''))
  //  this.$refs.modalForm.model={}
   //请求后端查看文件夹
   this.resList(checkedKeys)
    //计算具体的值
    this.determine(checkedKeys)
  },
  resList(checkedKeys) {
   const httpurl = this.url.resourceList
   const key = checkedKeys
   console.log(key,'key');
   const a =  localStorage.getItem('ids')
   const params = {
    id:key == undefined ? a : key[0],
    pageNo: this.ipagination.current,
    pageSize: this.ipagination.pageSize

   }
   getAction(httpurl, params).then((res) => {
    if (res.success) {
     this.dataSource = res.result.records
     this.ipagination.total = res.result.total
     this.ipagination.size = res.result.size
     this.ipagination.current = res.result.current
    }
   })
  },
  resource(){
    this.resList();
  },
    //根据id计算是文件夹还是项目
    determine(checkedKeys) {
      const httpurl = this.url.determineById
      const params = {
        id: checkedKeys[0]
      }
      //请求后端查看文件夹
      getAction(httpurl, params).then(res => {

        this.busFolderVo=res.result;
        let type = 'type'
        this.$nextTick(()=>{
          console.log(this.$children[0].$children[4].derplist(res.result.projectId,type),'111111111');
        })

        this.$refs.modalForm.setValue(this.busFolderVo)

      })
    },
    //所有项目下拉
    projectNameList(name) {
      console.log(name, 'name')
      const httpurl = this.url.pjtselect
      const method = 'get'
      const params = {
        projectNidame: name
      }
      getAction(httpurl, params, method).then(res => {
        this.arr = res.result
      })
    },
    //所属文件夹下拉
    folderNameList(name,type) {
      console.log(type,'type');
      const httpurl = this.url.busFolder
      const method = 'get'
      let params
      if(type == 'type')
      {
         params = {
          projectId: name
      }
      }else
      {
         params = {
        folderName: name
      }
      }

      getAction(httpurl, params, method).then(res => {
        this.folderlist = res.result
      })
    },
    //资源类型
    resourceNameList(name) {
      const httpurl = this.url.fileLists
      const method = 'get'
      const params = {
        fileSuffix: name
      }
      getAction(httpurl, params, method).then(res => {
        this.filelist = res.result
      })
      // this.resList()
    },
    //搜索事件
    handleChange(type, e) {
       if (type == 1) {
        this.projectNameList(e)
      } else if (type == 2) {
        this.folderNameList(e)
      } else if (type == 3) {
        this.resourceNameList(e)
      }
    },
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },
    //所有项目进行选择事件
    onchanges(e)
    {
      this.folderNameList(e,'type')
    },
    //下载
    handledown(record) {
      localStorage.setItem('fileName',record.fileName)
      const httpurl = this.url.download
      const params = {
        id:record.id,
        fileName: record.fileName,
        filePath:record.filePath
      }
      downLodaImg(httpurl, params).then(res => {
        if(res.code == 200)
        {
          this.$message.success('下载成功')
        }else
        {
          this.$message.error('下载失败')
        }
      })
    },
    // 删除
    handledelete(id) {
      const httpurl = this.url.delete
      const params = {id:id}
      deleteAction(httpurl,params).then((res)=>{
        if(res.code == 200)
        {
          this.$message.success(res.message)
          this.loadData();
        }else
        {
          this.$message.error(res.message)
        }
      })

    },
    onBirthdayChange(value, dateString) {
      this.queryParam.startDate = dateString[0]
      this.queryParam.endDate = dateString[1]
    },
  }
}
</script>
<style scoped lang="less">
 #container {
  width: 100%;
  margin: 1 auto;
}

#left {
  width: 25%;
  height: 600px;
  float: left;

}

#right {
  width: 75%;
  height: 600px;
  float: right;

}
/deep/.ant-tree {
  overflow-x: auto
}

@import '~@assets/less/common.less';
</style>

